<template>
  <div v-if="filmInfo">
    <detail-header v-scroll="50">
      {{ filmInfo.name }}
    </detail-header>
    <!-- <img :src="filmInfo.poster" alt=""> -->
    <div :style="{
      backgroundImage: 'url(' + filmInfo.poster + ')'
    }" class="poster"></div>
    <div class="content">
      <div>{{ filmInfo.name }}</div>
      <div>
        <div class="detail-text">{{ filmInfo.category }}</div>
        <div class="detail-text">{{ filmInfo.premiereAt | dateFilter }}上映</div>
        <div class="detail-text">{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
        <div class="detail-text" style="line-height:15px;" :class=" isHidden?'hidden':'' ">{{ filmInfo.synopsis }}</div>
        <div style="text-align:center;"><i class="iconfont" @click="isHidden=!isHidden" :class=" isHidden?'icon-moreunfold':'icon-less' "></i></div>
      </div>

      <div>
        <div>演职人员</div>
        <detail-swiper :perview="3.5" name="actors">
          <detail-swiper-item v-for="(data, index) in filmInfo.actors" :key="index">
            <div :style="{
              backgroundImage: 'url(' + data.avatarAddress + ')',
            }" class="avatar">

            </div>
            <div style="text-align:center;font-size:12px;">{{ data.name }}</div>
            <div style="text-align:center;font-size:13px;">{{ data.role }}</div>
          </detail-swiper-item>
        </detail-swiper>
      </div>

      <div>
        <div>剧照</div>
        <detail-swiper :perview="2" name="photos">
          <detail-swiper-item v-for="(data, index) in filmInfo.photos" :key="index">
            <div
            :style="{
              backgroundImage: 'url(' + data + ')',
            }"
            class="avatar"
            @click="handlePreview(index)"
            ></div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import http from '@/util/http'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'
import detailHeader from '@/mycomponents/detail/DetailHeader'
import { ImagePreview, Toast } from 'vant'
import obj from '@/util/mixinObj'

moment.locale('zh-cn')
// console.log()

Vue.filter('dateFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})

Vue.directive('scroll', {
  inserted (el, binding) {
    // console.log(el,binding)
    el.style.display = 'none'

    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },

  unbind () {
    window.onscroll = null
  }
})

export default {
  mixins: [obj],
  data () {
    return {
      filmInfo: null,
      isHidden: true
    }
  },

  methods: {
    handlePreview (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  },

  mounted () {
    // console.log('created', this.$route.params.id)

    // axios 复用id发请求到详情接口，获取详细数据，布局页面  ${ this.$route.params.id }

    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=7337259`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      // console.log(res.data.data.film)
      this.filmInfo = res.data.data.film
    })
  },

  // mounted () {
  //   window.onscroll = () => {
  //     console.log("scroll")

  //     if(document.documentElement.scrollTop>50) {
  //       console.log("显示")
  //     } else {
  //       console.log('隐藏')
  //     }
  //   }

  // },

  // destroyed () {
  //   window.onscroll = null
  // },

  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  }
}
</script>

<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 210px;
  background-position: center;
  background-size: cover;
}
.content {
  padding: 15px;
  .detail-text {
    color: #797d82;
    font-size: 13px;
    margin-top: 4px;
  }
}
.hidden {
  overflow: hidden;
  height: 30px;
}
.avatar {
  width: 100%;
  height: 85px;
  background-position: center;
  background-size: cover;
}
</style>
